<template>
  <BackHeader :title="$t('activity.resgatar.page_title')" />

  <Head />
  <div class="app_center activity-page">
    <TitleBox :tabs="tabs" :activityData="activityData" />
    <List1 v-show="showListIndex === 1" :activityData="activityData" />
    <List2 v-show="showListIndex === 2" :historyList="historyList" />
    <!-- 规则说明组件 -->
    <RuleBox :content="activityData.desc" />
  </div>
</template>

<script setup lang="ts">
// 组件导入
import Head from "./components/Head.vue";
import TitleBox from "./components/TitleBox.vue";
import List1 from "./components/List1.vue";
import List2 from "./components/List2.vue";

// ----------------------------------
// 状态
// ----------------------------------
const activityData: any = ref({})
const historyList = ref([])
const showListIndex = ref(1)
const userStore = useUserStore()

// Tab 配置：切换列表 or 触发领取
const tabs: any = ref([
  {
    id: 1,
    name: $t('activity.resgatar.btn_1'),
    callback() {
      showListIndex.value = showListIndex.value === 1 ? 2 : 1
    },
  },
  {
    id: 2,
    name: $t('activity.resgatar.btn_2'),
    disabled: false,
    callback() {
      // 已领取则禁用
      if (tabs.value.find((t: any) => t.id === 2)?.disabled) {
        return
      }
      // 不需要充值领取
      if (!activityData.value.is_recharge_receive) {
        claimReward()
        return
      }
      // 次日未充值
      if (!activityData.value.is_recharge) {
        apo.toast.showToast($t('activity.resgatar.toast'))
        userStore.changeShowCarteira(true)
        return
      }
      // 调用领取奖励接口
      claimReward()
    },
  },
])

// 设置 Tab 禁用状态（避免硬编码下标）
function setTabDisabled(id: number, disabled: boolean) {
  const tab = tabs.value.find((t: any) => t.id === id)
  if (tab) tab.disabled = disabled
}

// ----------------------------------
// 数据请求
// ----------------------------------
function getHistoryList() {
  // TODO 新通用类型接口 /api/v1/activity/list
  apo.activity.getHistoryList(45, (error: any, data: any) => {
    if (error) {
      apo.logger.error('getHistoryList error:', error)
    } else {
      // 为每条历史记录生成稳定 id（若后端已提供可直接使用）
      historyList.value = (data || []).map((item: any, idx: number) => ({
        id: item.id ?? `${Date.now()}-${idx}`,
        ...item,
      }))
    }
  })
}

// 获取活动详情：控制“领取”按钮可用状态
function getActivityDetail() {
  apo.activity.getActivityDetailInfo(45, (error: any, data: any) => {
    if (error) {
      apo.logger.error('getActivityDetailInfo error:', error)
      return
    }
    setTabDisabled(2, data.is_received)
    activityData.value = data
  })
}

// 领取奖励
function claimReward() {
  apo.activity.claimActivityReward(45, (error: any) => {
    if (error) {
      apo.logger.error('claimActivityReward error:', error)
      return
    }
    apo.toast.showSuccess($t('system.success'))
    initConfig()
  })
}

function initConfig() {
  getActivityDetail()
  getHistoryList()
}

// ----------------------------------
// 生命周期
// ----------------------------------
onActivated(() => {
  initConfig()
})
</script>

<style scoped lang="scss">
.activity-page {
  height: initial !important;
  overflow: visible !important;
  padding-top: 0;
}
</style>
